<template>
	<view class="all">
		<view class="tr">
			<image src="../../static/images/activity.png" style="width: 90rpx; height: 90rpx;"></image>
			<view class="tit">校庆活动</view>
		</view>
		<view class="titi">
			<view class="header-input">
				<input @input="goToSearch" placeholder="请输入活动名称或关键字" placeholderStyle="color:#BBBBBB" type="text" v-model="name"></input>
				<view>
					<image class="search-image" src="../../static/images/search.png"></image>
				</view>
			</view>
		</view>
		<view v-if="entity !==undefined && entity.length > 0">
			<view v-for="(item,index) in entity" :key="index">
				<navigator :url="'../home/Edetail?id='+item.id">
					<view class="td1">
						<view class="tab1">
							<image class="td" :src="getHeadUrl(item.photo_path)" style="width: 150rpx; height: 150rpx;"></image>
							<view class="te">{{item.name}}</view>
						</view>
						<view class="tex1">活动时间: {{toDate(item.start_time)}}至{{toDate(item.end_time)}}</view>

						<view class="te1">地点:{{item.place}}</view>
						<view v-if="item.create_by==null">
							<view class="te2">暂无</view>
						</view>
						<view v-else class="te2">发布人：{{item.create_by}}</view>
					</view>
				</navigator>
			</view>
		</view>
		<view v-else>
			<view>
				<view class="nothing">暂无校友活动</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				entity: [],
				id: 2,
				size: 7,
				page: 0,
				type: 1, //更据tpye来判断当前页是总活动还是查询页 1:总活动页 2：查询页
				name: ''
			}
		},
		onLoad() {
			uni.request({
					url: getApp().globalData.URL + 'activities/entity?page=' + this.page + '&size=' + this.size,
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log("成功连接!!");
					this.entity = res.data;
					console.log(this.entity);
				})
		},
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是最底部了");
			if (this.type === 1) {
				this.getMoreNews(); //到底之后会触发getMoreNews()函数;
			} else {
				this.getMoreNewsByName();
			}

		},
		methods: {
			getHeadUrl(path) {
				if (path == null) {
					return getApp().globalData.Link + 'file/system/默认.jpg';
				} else {
					return getApp().globalData.Link + 'upload/图片/' + path;
				}

			},
			toDate: function(time) {
				let date = new Date(time); //获取一个时间对象
				let dateString = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
				//console.log(dateString)
				return dateString;
			},
			goToSearch() {
				if (this.name === '') {
					this.type = 1;
					this.page = 0;
					uni.request({
							url: getApp().globalData.URL + 'activities/entity?page=' + this.page + '&size=' + this.size,
							method: 'GET'
						})
						.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
							var [error, res] = data;
							console.log("成功连接!!查询1");
							this.entity = res.data;
							console.log(this.entity);

						});
				} else {
					this.type = 2;
					this.page = 0;
					uni.request({
							url: getApp().globalData.URL + 'activities/byname?page=' + this.page + '&size=' + this.size + '&name=' + this.name,
							method: 'GET'
						})
						.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
							var [error, res] = data;
							console.log("成功连接!!查询2");
							this.entity = res.data;
							console.log(this.entity);
						});
				}
				console.log("成功查询");
				console.log(this.type)

			},
			getMoreNews: function() { //数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'activities/entity?page=' + this.page + '&size=' + this.size,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log("成功连接!!");
						console.log(this.page);
						console.log("成功连接!!");
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.entity = this.entity.concat(res.data)
						console.log(this.entity);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止

					});
			},
			getMoreNewsByName: function() {
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'activities/byname?page=' + this.page + '&size=' + this.size + '&name=' + this.name,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log("成功连接!!");
						console.log(this.page);
						console.log("成功连接!!");
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.entity = this.entity.concat(res.data)
						console.log(this.entity);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止

					});
			},
		}
	}
</script>

<style>
	.nothing {
		text-align: center;
	}

	.tit {
		color: #007AFF;
		margin: 10rpx 10rpx;
	}

	.titi {
		margin-top: -20rpx;
		height: 100rpx;
		background-color: #FFFFFF;
	}

	.im {
		top: 7rpx;
	}

	.header-input {
		margin-left: 28rpx;
		margin-top: 20rpx;
		width: 694rpx;
		height: 66rpx;
		border-radius: 36rpx;
		background-color: rgba(245, 245, 245, 0.9);
		border: 1rpx solid #dfdfdf;
		display: flex;
		flex-direction: row;
	}

	.header-input input {
		margin-left: 31rpx;
		width: 564rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-right: 1rpx solid #dfdfdf;
		font-size: 28rpx;
	}

	.header-input view {
		width: 96rpx;
		height: 66rpx;
	}

	.search-image {
		margin-left: 20rpx;
		margin-top: 11rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.tr {
		display: flex;
		height: 100rpx;
		/* border-bottom: 1rpx solid #007AFF; */
		/* margin-top: 10rpx; */
		/* margin: 10rpx 10rpx; */
		background-color: #FFFFFF;
		text-align: center;

	}

	.tab {
		margin-top: 10rpx;
		height: auto;
		background-color: #FFFFFF;
		display: flex;
		border-bottom: 1px solid #D6D4D4;
	}

	.tab1 {
		/* margin-top: 10rpx; */
		height: auto;
		background-color: #FFFFFF;
		/* height: 180rpx; */
		display: flex;
		border-bottom: 1px solid #D6D4D4;
	}

	.all {
		background-color: #F1F1F1;
		height: auto;
	}

	.td {
		/* width: 95%; */
		/* background-color: #FFFFFF; */
		margin: 20rpx 20rpx;
		border-radius: 2%;
		margin-top: 10rpx;

	}

	.tex {
		/* text-align: center; */
		font-size: 25rpx;
		margin: 20rpx 20rpx;
		margin-left: 150rpx;
		/* border-bottom: 1px solid #D6D4D4; */
	}

	.te {
		font-size: 30rpx;
		margin: 20rpx 20rpx;
	}

	.tex1 {
		font-size: 25rpx;
		margin-top: -100rpx;
		margin-left: 210rpx;

	}

	.te1 {
		margin-left: 210rpx;
		font-size: 25rpx;
		margin-top: 20rpx;
		color: #808080;
	}

	.td1 {
		border-bottom: 1px solid #CCCCCC;
		margin-bottom: 20rpx;
	}

	.te2 {
		margin-left: 520rpx;
		margin-right: 10rpx;
		font-size: 25rpx;
		margin-top: -30rpx;
		text-align: right;
		color: #808080;
	}
</style>
